<template>
    <div class="home">
        <van-nav-bar title="详情" left-text="" right-text="" @click-left="onClickLeft"  />
        <div style="height: 2.8rem;">
        </div>
        
                   <!--查看大图-->
         <van-image-preview
          v-model="show"
          :images="images"
          @change="onChange"
        >
          <template v-slot:index><span></span>{{images.length>1?'第':'共'}}{{ index }}张</template>
</van-image-preview>
        
        <van-list v-model="loading" :finished="finished" finished-text="--------没有更多了--------" @load="onLoad" :offset='180'>
            
            <div class="hometitle">
                <div class="hometitletop" style="display: block">
                    <div class="homeimg">
                        <p class="partic_left">
                             <img v-if="item.is_official && ( item.avatar=='string'||  item.avatar == '' || item.avatar== null || item.avatar==undefined )" class="home_img" border='0' src="../img/guanfang2@2x.png" />
                            <img v-else-if=" item.avatar=='string'|| item.avatar == '' || item.avatar==null || item.avatar==undefined " class="home_img"  src='../img/banckgroun@2x.png' />
                             <img v-else class="home_img" border='0' :src="item.avatar" />
                        </p>
                      
                        <p class="home_p"><span>{{item.nickname}} <img v-if='item.is_official'  style="width: 1.3rem;height: 0.7625rem; " src="../img/guanfnag@2x.png"/></span><span>{{$getDateCycle(item.created_timestamp)}}</span></p>
                    </div>
                    <div class="homeimg">
                        <!--<p><img  class="home_img_right" src="../img/../img/img@2x.png"/></p>
          <p><span class="home_p_span">置顶 </span></p>          -->
                    </div>
                </div>
                <div class="home_conent" >
                    <p v-html="item.content">
                        
                    </p>
                    <p :class="item.images_list.length>2?'homep':'homepcenter'" v-if='item.images_list!=undefined && item.images_list.length>0'>
                        <span style="width: 6.25rem;
    height: 6.25rem;display: inline-block;overflow: hidden;padding-right: 0.6rem;" v-for="(img,index) in item.images_list" :key='index'>
                       <img @click="onChangimg()"  :src="img" />                            
                        </span>
                    </p>

                </div>
                <div class="homepbottom">

                    <p><span>
                        <img v-if="status==false" @click="givelike(1)" src="../img/xin@2x.png"/>
                        <img @click="givelike(0)" v-if="status==true" src="../img/istrue2@2x.png"/>
                        {{item.like_count}}{{numbe}}
                    </span>
                    </p>
                </div>

            </div>
           
            <van-tabs v-model="active" class='aaa' color='rgba(107, 80, 248, 1)'>
                <van-tab :title="titlelength">
                                
                    <div class="hometitlepar" v-for='item in getvalue' :key='item.created_timestamp'>
                        <div class="hometitletop">
                            <div class="homeimg homeimgcenter">
                                <p style="width: 2.5rem;height: 2.5rem;overflow: hidden;border-radius:1.25rem ; ">
                                    <img class="home_img" :src="item.user.avatar" v-lazy="item.user.avatar" />
                                </p>
                                <p class="home_p">
                                    <span>{{item.nickname}}</span>
                                    <span>{{item.content}}</span>
                                    <span>{{$getDateCycle(item.created_timestamp)}}</span>
                                </p>
                            </div>

                        </div>
                        <van-divider />
                    </div>

                </van-tab>
                <van-tab title="" disabled></van-tab>
                <van-tab title="" disabled></van-tab>
                <van-tab title="" disabled></van-tab>
            </van-tabs>
        </van-list>
        <div style="height: 3.6rem;"></div>
        <div class="partionst">

            <van-row>

                <van-col span="20">
                    <input type="text" class="textname" v-model="value" name="" @input="descInput" id="" placeholder="说点什么吧......" value="" />
                    <span class="xianzhi">{{remnant}}/300</span>               
                </van-col>

                <van-col span="3" class='textcenter'><span @click="onSearch">发送</span></van-col>
                
            </van-row>

        </div>

    </div>
</template>

<script>
    import {addCookie,getCookie} from "../api/addCookie"
    export default {
        name: 'home',
        data() {
            return {
                active: 0,
                value: '',
                item: '',
                getvalue: [],
                titlelength: '',
                loading: false,
                finished: false,
                totalPage: 0,
                pagenamber: 1,
                status: '',
                datalist: [],
                numbe: '',
                istrue:true,
                show: false,
                remnant:0,
                  index: 1,
                  images: [],
                  total:''
            }
        },
        mounted() {           
                /*调取详情*/
            this.init(this.$route.query.id)
        },
        methods: {
                /*图片页数*/
            onChange(index) {
              this.index = index+1;
            },
             /*查看大图*/
            onChangimg(){
                this.show = true;
            },
                /*请求评论上拉加载*/
            onLoad() {
                var that = this
                setTimeout(() => {
                    this.totalPage = that.totalPage + 1
                    this.Getcomments(that.$route.query.id, this.totalPage)
                }, 500);
            },
                /*返回*/
            onClickLeft() {           
                var ua = navigator.userAgent.toLowerCase();
                if(/iphone|ipad|ipod/.test(ua)) {   
                window.webkit.messageHandlers.onBack.postMessage('');
               } else if(/android/.test(ua)) {                  
                   if((typeof jsObj)!="undefined"){                     
                      jsObj.onBack()                 
                   }else{                   
                     
                   }                                                    
                }else{
                    this.$router.go(-1)
                }           
            },
            /*获取详情*/
            init(id) {
                this.$get(`member/community/details/${id}`)
                    .then((res) => {
                        this.status = res.is_like
                        res.nickname = res.user.nickname
                        res.avatar = res.user.avatar
                        this.item = res
                        this.images=res.images_list
                    })
                    .catch((error) => {
                        this.$toast({
                            "message": this.$error[error.response.data.code],
                            'duration': 500
                        })
                    })
            },
            /*获取评论*/
            Getcomments(id, page) {
                this.$get(`member/community/comment/${id}`, {
                        'page': page,
                        'per_page': 7
                    })
                    .then((res) => {
                        this.loading = false
                        this.titlelength = `评论  ${res.total}`
                        this.total=res.total
                        for(var i = 0; i < res.items.length; i++) {
                            res.items[i].nickname = res.items[i].user.nickname
                            if(res.items[i].user.avatar=='' || res.items[i].user.avatar==null || res.items[i].user.avatar== undefined){
                                res.items[i].user.avatar=require("../img/banckgroun@2x.png")
                            }
                            this.getvalue.push(res.items[i])
                        }
                        if(this.totalPage >= res.pages) {
                            this.finished = true
                        }
                    })
                    .catch((error) => {
                        this.$toast({
                            "message": this.$error[error.response.data.code],
                            'duration': 500
                        })
                    })
            },
            /*点赞*/
            givelike(statu) {
                this.$put('member/community/edit_like', {
                        "message_id": this.$route.query.id,
                        "status": statu
                    })
                    .then((res) => {
                        this.init(this.$route.query.id)
                        if(statu == '1') {
                            
                            this.status = true
                            this.$toast({
                                "message": '点赞成功',
                                'duration': 500
                            })
                        } else {
                            this.$toast({
                                "message": '取消点赞',
                                'duration': 500
                            })
                            this.status = false
                        }

                    })
                    .catch((error) => {
                        this.$toast({
                            "message": this.$error[error.response.data.code],
                            'duration': 500
                        })
                    })
            },
            /*发送*/
            onSearch() {                
                var that=this;
                if(this.value == '' || this.value == null || this.value == undefined) {
                    this.$toast({
                        "message": '评论内容不能为空',
                        'duration': 500
                    })
                }else if(this.value.match(/^[ ]*$/)){
                   this.$toast({
                        "message": '评论内容不能为空',
                        'duration': 500
                    }) 
                }
                else {
                    if(this.istrue){
                        this.istrue=false
                    this.$post('member/community/comment', {
                            "message_id": this.$route.query.id,
                            "content": this.value
                        })
                        .then(() => {
                            this.remnant=0
                            this.istrue=true
                            var timestamp = (new Date()).getTime();
                            console.log(this.getvalue.length)
                            if(this.getvalue.length == '0') {                               
                                this.Getcomments(that.$route.query.id, 1)                              
                            } else {
                                this.getCookie= JSON.stringify(getCookie('user'))
                                this.getvalue.push({
                                    "content": this.value,
                                    "nickname": getCookie('nickname'),
                                    "created_timestamp": timestamp,
                                    "user":{
                                        'avatar':getCookie('userimg')
                                    }
                                })
                                this.total++
                                this.titlelength = `评论  ${this.total}`
                                
                            }  
                            this.value = ''
                            this.$toast({
                                "message": '评论成功',
                                'duration': 500
                            })
                        })
                        .catch((error) => {
                            this.istrue=true
                            this.$toast({
                                "message": this.$error[error.response.data.code],
                                'duration': 500
                            })
                        })
                        }
                }

            },
            /*监听数字*/
           descInput(){
               var txtVal = this.value.length;
                if(txtVal>'300'){
                    this.$toast({
                                "message": '字数最多为300字',
                                'duration': 800
                            })
                    this.remnant=0
                    this.value=this.value.slice(0,299)
                }else{
                    this.remnant = 300 - txtVal; 
                }
           }

        },
         beforeRouteLeave (to, from, next) {
            if (to.name =='home') {
              to.meta.keepAlive = false
            } else {
              to.meta.keepAlive = false
            }
            next()
          },

    }
</script>
<style type="text/css">
    
</style>
<style scoped="">
    .van-row {
        margin-top: 0.625rem;
        display: flex;
        justify-content: space-between;
        padding: 0rem 0.625rem;
    }
    .xianzhi {
        position: absolute;
        bottom: 1.7rem;
        right: 4.8rem;
        color: rgba(197, 199, 210, 1);
        font-size: 0.75rem;
        z-index: 2!important;
    }
    .partic_left{
        width: 2.5rem;
        height: 2.5rem;
        float: left;
        border-radius:1.25rem ;overflow: hidden;
        margin-right: 0.625rem;
    }
    .van-nav-bar {
        position: fixed;
        top: 0rem;
        width: 100%;
        z-index: 2!important;
        /*background: linear-gradient(blue, pink);*/
        /*background: linear-gradient(to right,rgba(34, 82, 232, 1),rgba(227, 76, 230, 1))*/
    }
    
    .partionst {
        height: 3.9875rem;
        width: 100%;
        border-top: 0.03125rem solid #999;
        position: fixed;
        bottom: 0rem;
        left: 0rem;
        background: #FFFFFF;
        z-index: 10!important;
    }
    
    .textname {
        border-radius: 1.25rem;
        border: 0.03125rem solid #333;
        width: 100%;
        padding: 0.625rem 8px 0.625rem 0;
        padding-left: 0.625rem;
    }
    
    .textcenter {
        text-align: center;
        margin-left: 0.225rem;
        /*padding: 0.325rem 8px 0.625rem 0;*/
    }
    
    .textcenter span {
        width: 3.125rem;
        height: 2.45rem;
       
        line-height: 2.45rem;
        
        color: #fff;
        display: inline-block;
        border-radius: 1.025rem;
        background: rgba(107, 80, 248, 1);
        font-size: 0.75rem;
    }
    
    .van-nav-bar__title {
        font-size: 1.125rem;
        color: #333;
    }
    
    .van-nav-bar__text {
        font-size: 1rem;
        color: #333;
    }
    
    .van-nav-bar__left {
        width: 3.125rem;
        height: 3.125rem;
        color: #fff;
        background: url(../img/left@2x.png) no-repeat left center;
        background-size: 0.625rem 1.125rem;
    }
    
    .hometitle {
        width: 21.25rem;
        min-height: 7.125rem;
        /*border: 0.03125rem solid #666;*/
        margin: 0.625rem auto 0.625rem auto;
        border-radius: 0.625rem;
        box-shadow: 0px 0px 11px 2px #f5f5f5;
    }
    
    .hometitletop {
        display: flex;
        justify-content: space-between;
        padding: 0.625rem 0.625rem 0.125rem 0.625rem;
    }
    
    .homeimg {
        width: 100%;
    }
    
    .homeimgcenter p:nth-of-type(1) {
        width: 2.8rem;
        height: 100%;
        float: left;
        margin-left: 0.625rem;
        
    }
    .homeimgcenter p:nth-of-type(2) {
        
        width: 82%;
        float: right;
        /*padding-left: 0.625rem;
        padding-right: 0.625rem;*/
    }
    
    .home_img_right {
        width: 0.65625rem;
        height: 0.6875rem;
        padding-right: 0.625rem;
    }
    
    .home_p span:nth-of-type(1) {
        font-size: 1rem;
        color: rgba(88, 88, 103, 1);
    }
    
    .home_p span:nth-of-type(2) {
        font-size: 0.8125rem;
        color: rgba(166, 166, 166, 1);
            word-break: break-all;
            margin-top: 0.15625rem;
    }
    
    .home_p span:nth-of-type(3) {
        font-size: 0.75rem;
        color: rgba(197, 199, 210, 1);
        margin-top: 0.325rem;
    }
    
    .home_p span {
        display: block;
    }
    
    .home_img {
        width: 2.5rem;
        height: 2.5rem;
        display: inline-block;
        
        background: url(../img/banckgroun@2x.png) no-repeat left center;
         background-size:2.5rem 2.5rem ;
         border: none;
    }
    
    .home_p_span {
        font-size: 0.75rem;
        color: rgba(233, 70, 94, 1);
    }
    
    .home_conent {
        padding: 0.5rem 0.625rem 0.625rem 0.625rem;
        font-size: 0.875rem;
        color: rgba(166, 166, 166, 1);
    }
    
    .homep {
        display: flex;
        justify-content: space-between;
        margin-top: 0.46875rem;
    }
    .homepcenter {
        display: flex;
        justify-content: flex-start;
        margin-top: 0.46875rem;
    }
    
    .homep img {
         width: 100%;
    height: 100%;
    object-fit:cover;
        /*height: 6.25rem;*/
    }
    .homepcenter img {
         width: 100%;
    height: 100%;
    object-fit:cover;
       
    }
    
    .homepbottom {
        height: 1.875rem;
        line-height: 1.125rem;
        /*padding: 0.625rem 0rem;*/
    }
    
    .homepbottom p {
        float: left;
        color: rgba(197, 199, 210, 1);
        font-size: 0.75rem;
    }
    
    .homepbottom img {
       width: 1.125rem;
        height: 1rem;
        padding: 0rem 0.625rem;
        float: left;
    }
    
    .van-tabs__line {
        background-color: rgba(107, 80, 248, 1);
    }
</style>